<template>
  <el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>进货单管理</span>
			<el-button style="float: right; padding: 3px 0" type="text" @click="showInputListCreateForm=true">新增进货单</el-button>
		</div>
		<el-table
			:data="inputListListData"
			style="width: 100%">
			<el-table-column label="进货单ID">
				<template slot-scope="scope">
					<i class="el-icon-key"></i>
					<span style="margin-left: 10px">{{ scope.row.inputListId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="商品ID">
				<template slot-scope="scope">
					<i class="el-icon-tickets"></i>
					<span style="margin-left: 10px">{{ scope.row.goodsId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="商品数量">
				<template slot-scope="scope">
					<i class="el-icon-star-on"></i>
					<span style="margin-left: 10px">{{ scope.row.goodsNumber }}</span>
				</template>
			</el-table-column>
			<el-table-column label="是否已执行">
				<template slot-scope="scope">
					<span style="margin-left: 10px">
						<el-tag type="info" v-if="scope.row.executed == 0">未执行</el-tag>
						<el-tag type="success" v-if="scope.row.executed == 1">已执行</el-tag>
						</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
						size="mini"
						@click="getinputListInfo(scope.$index, scope.row)">修改</el-button>
					<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			layout="prev, pager, next"
			style="padding-top: 15px; text-align: center"
			:page-size="7"
			@current-change="handleCurrentChange"
			:total="inputListNumber">
		</el-pagination>
		<!-- 进货单修改抽屉 -->
		<el-drawer
			size="50vw"
			:before-close="beforeUpdateFormClose"
			:visible.sync="showInputListInfoForm"
			direction="rtl">
			<inputList-update-form :inputListUpdateData="inputListInfo" :goodsList="goodsList"/>
		</el-drawer>
		<!-- 进货单创建抽屉 -->
		<el-drawer
			size="50vh"
			:before-close="beforeCreateFormClose"
			:visible.sync="showInputListCreateForm"
			direction="btt">
			<inputList-create-form :goodsList="goodsList"/>
		</el-drawer>
	</el-card>
</template>

<script>
import { inputListList,inputListSearch,inputListDelete } from '@/api/storage'
import { goodsAll } from '@/api/common'
import InputListCreateForm from './Drawer/InputListCreateForm.vue'
import InputListUpdateForm from './Drawer/InputListUpdateForm.vue'
	export default {
		name: 'InputList',
		data() {
			return {
				//总记录数
				inputListNumber: 0,
				// 获取进货单列表分页参数
				inputListListParam:{
					startIndex: 0,
					pageSize: 7
				},
				// 进货单列表
				inputListListData: [],
				// 显示进货单创建抽屉
				showInputListCreateForm: false,
				// 显示进货单修改抽屉
				showInputListInfoForm: false,
				// 进货单信息
				inputListInfo: {},
				// 所有商品
				goodsList: []
			}
		},
		props: {
			// 获取父组件参数
		},
		components: {
			InputListCreateForm,
			InputListUpdateForm
		},
		methods:{
			// 进货单删除
			handleDelete(index, row){
				inputListDelete({inputListId: row.inputListId}).then(res=> {
					this.getInputListList()
				})
			},
			// 改变页码
			handleCurrentChange(val) {
				this.inputListListParam.startIndex = val - 1
				this.getInputListList()
			},
			// 获取进货单列表
			getInputListList(){
				inputListList(this.inputListListParam).then(res => {
					console.log(res.data);
					this.inputListListData = res.data.inputListList
					this.inputListNumber = res.data.total
				})
			},
			// 修改进货单抽屉关闭前
			beforeUpdateFormClose(){
				this.getInputListList()
				this.showInputListInfoForm = false
			},
			// 创建进货单抽屉关闭前
			beforeCreateFormClose(){
				this.getInputListList()
				this.showInputListCreateForm = false
			},
			// 获取进货单信息
			getinputListInfo(index, row){
				inputListSearch({inputListId: row.inputListId}).then(res => {
					this.inputListInfo = res.data.inputList	
					console.log(this.inputListInfo);
					this.showInputListInfoForm = true
				})
			},
			// 获取商品列表
			getGoodsList(){
				goodsAll().then(res => {
					this.goodsList = res.data.goodsList
				})
			}
		},
		computed:{
				//计算属性
		},
		watch:{
				//监听属性
		},
		created() {
			this.getInputListList()
			this.getGoodsList()
		}
	}
</script>

<style scoped>
	.box-card{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>